<template>
	<div class="settlementorderinformation">
	<orderinformation :orderinformation="productlist"></orderinformation>
	<body class="body">
		<div class="product">
			<div class="productlist">
				<div class="productInfomation" @click="goProduct(productlist.productId)">
					<div class="left">
						<img :src="productlist.thumbnail" />
					</div>
					<div class="right">
						<p class="productName">{{productlist.productName}}</p>
						<p><span>租赁押金：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.deposit}}元</span></p>
						<p><span>租赁价格：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.rentPrice}}</span><span style="color: #FF0000;">元/每天</span></p>
						<p class="shortDesc">{{productlist.shortDesc}}</p>
					</div>
				</div>
				<!--<div class="payWay">
				<label class="demo--label">
                 <input class="demo--radio" type="radio" id="one" value="1" v-model="pay">
                 <span class="demo--radioInput"></span>微信支付
              </label>
              <label class="demo--label">
                 <input class="demo--radio" type="radio" id="one" value="2" v-model="pay">
                 <span class="demo--radioInput"></span>账户余额
              </label>
            </div>-->
				<div class="rodertotalprice">
					<p class="ordertitle">订单总价</p>
					<p class="deposit">￥{{productlist.totalPay}}元</p>
				</div>
				<div class="rellayprice">
					<p class="rellaytitle">{{styletitle}}</p>
					<p class="rellaypayment">￥{{productlist.rentAmountCost}}元</p>
				</div>
			</div>
		</div>
		<div class="preferentialactives" v-if="productlist.productFavourables !== undefined && productlist.productFavourables.length >0">
			<p class="titleactive">此订单享有的优惠活动</p>
			<div class="actives" v-for="(item,index) in productlist.productFavourables">
			  <h3>{{item.favourType}}</h3>
			  <p class="details">{{item.favourDesc}}</p>
			</div>
		</div>
		<div class="orderinformation">
			<p class="orderheader">订单信息</p>
			<div class="rodercontent">
				<p><span>订单编号：</span><span>{{productlist.rentSerial}}</span></p>
				<p><span>店铺名：</span><span>{{productlist.shopName}}</span></p>
				<p v-if="!!productlist.favourableAmount"><span>预付租金：</span><span>￥{{productlist.favourableAmount}}元</span></p>
				<p><span>租赁天数：</span><span>{{productlist.rentDayCount}}天</span></p>
				<p><span>租金：</span><span>￥{{productlist.rentAmountCost}}元</span></p>
				<p><span>取货时间：</span><span>{{productlist.pickTime}}</span></p>
				<p><span>还货时间：</span><span>{{productlist.returnTime}}</span></p>
				<p><span>创建时间：</span><span>{{productlist.createTime}}</span></p>
			</div>
		</div>
	</body>
	<footer class="footers">
		<div class="payfor" @click="settlementorder(productlist.rentSerial)">结算</div>
	</footer>
</div>
</template>

<script>
import orderinformation from '@/components/m-orderinformation/orderinformation'
import { jsSDK } from '@/common/js/pay'

export default {
	name: 'settlementorderinformation',
	components: {
		orderinformation
	},
	data() {
		return {
			productlist: {},
			styletitle: '',
			pay: '',
			payWay: '结算'
		}
	},
	mounted() {
		this.getPayInformation();
	},
	methods: {
		//获取付款详情
		getPayInformation() {
			this.styletitle = this.$route.query.style_title;
			this.$http.get(this.$store.state.reqUrl + this.$route.query.interface_url + '/' + this.$route.query.payNo_rentSerial, {}).then(res => {
				this.productlist = res.data;
			})
		},
		//结算订单
		settlementorder(rentSerial) {
			/*if(this.pay == "" || this.pay == null) {
				this.$toast("请选择支付方式！")
				return false;
			}*/
			this.$http.post(this.$store.state.reqUrl + '/customer/orders/payRentFee', {
				payWay: 1,
				rentOrderSerial: this.$route.query.payNo_rentSerial
			}).then(res => {
				if(res.data.payWay == 1) {
					jsSDK(res.data, this.payWay)
				} else {
					this.$toast(res.data.msg)
					this.$router.push({
						path: "/completeorder",
						query: {
							interface_url: '/customer/orders',
							statu:5,
							styletitle: '实付款',
							order_time: '还货时间',
							order_title:'已完成订单'
						}
					});
				}
			}).catch(res => {
				this.$toast(res.response.data)
			})
		},
		//到产品详情页
		goProduct(productId) {
			this.$router.push({
				path: '/productInfomation',
				query: {
					product_id: productId
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
    .settlementorderinformation {
    	font-size: 28px;
    	margin-top: 100px;
    	margin-bottom: 100px;
    	width: 100%;
    	.body {
    		background: none;
    		.product {
    			width: 100%;
    			margin-bottom: 20px;
    			background: #FFFFFF;
    			.productlist {
    				padding: 20px 20px;
    				.payWay {
    					margin:20px 0 20px 0;
    					font-size: 28px;
    					.demo--label {
    						margin: 20px 20px 0 0;
    						display: inline-block
    					}
    					.demo--radio {
    						display: none
    					}
    					.demo--radioInput {
    						background-color: #fff;
    						border: 2px solid rgba(0, 0, 0, 0.15);
    						border-radius: 100%;
    						display: inline-block;
    						height: 36px;
    						margin-right: 10px;
    						margin-top: -1px;
    						vertical-align: middle;
    						width: 36px;
    						line-height: 1
    					}
    					.demo--radio:checked+.demo--radioInput:after {
    						background-color: #00A1E9;
    						border-radius: 100%;
    						content: "";
    						display: inline-block;
    						height: 26px;
    						margin-left: 5px;
    						margin-top: 5px;
    						width: 26px
    					}
    					.demo--checkbox.demo--radioInput,
    					.demo--radio:checked+.demo--checkbox.demo--radioInput:after {
    						border-radius: 0;
    					}
    				}
    				.productInfomation {
    					display: flex;
    					.left {
    						width: 120px;
    						height: 120px;
    						img {
    							width: 100%;
    							height: 100%;
    						}
    					}
    					.right {
    						font-size: 26px;
    						flex: 1;
    						margin-left: 20px;
    						.productName{
    							color: #000000;
    							font-weight: 800;
    						}
    						.shortDesc{
    							line-height: 30px;
    						}
    					}
    				}
    			}
    			.rodertotalprice {
    				display: flex;
    				height: 40px;
    				font-size: 26px;
    				padding: 20px 0;
    				color: #000000;
    				.ordertitle {
    					flex: 1;
    				}
    				.deposit {
    					text-align: right;
    					flex: 1;
    				}
    			}
    			.rellayprice {
    				font-size: 26px;
    				color: #000000;
    				display: flex;
    				.rellaytitle {
    					flex: 1;
    				}
    				.rellaypayment {
    					color: #FF0000;
    					text-align: right;
    					flex: 1;
    				}
    			}
    		}
    		.preferentialactives{
			     	width:100%;
			     	background: #FFFFFF;
			     	margin:20px 0 20px 0;
			     	.titleactive{
			     		padding: 20px 20px 30px 20px;
	    				color: #000000;
	    				font-weight: 700;
	    				font-size: 28px;
			     	}
			     	.details{
			     		font-size: 24px;
			     		text-indent: 2em;
			     		line-height: 45px;
			     	}
			     	.actives{
			     		padding:5px 20px;
			     		h3{
			     			color: #FF0000;
			     			padding:0 20px;
			     			font-size: 26px;
			     		}
			     	}
			     }
    		.orderinformation {
    			font-size: 26px;
    			background: #FFFFFF;
    			.orderheader {
    				padding:20px 20px 10px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
    			}
    			.rodercontent{
    				line-height: 60px;
    				padding:20px 20px;    			
    		  }
    		}
    	}
    	.footers {
    		width: 100%;
    		background: #FFFFFF;
    		position: fixed;
    		bottom: 0;
    		height: 100px;
    		border-top: 1px solid gainsboro;
    		.payfor {
    			float: right;
    			width: 170px;
    			height: 52px;
    			text-align: center;
    			line-height: 52px;
    			border: 1px solid #FF0000;
    			color: #FF0000;
    			margin-top: 30px;
    			border-radius: 30px;
    			margin-right: 20px;
    		}
    	}
    }
</style>